import React from 'react';
import { Box, Text } from 'ink';
import { Message, ThemeConfig } from '../types';
import MessageItem from './MessageItem';

interface MessageListProps {
  messages: Message[];
  theme: ThemeConfig;
}

const MessageList: React.FC<MessageListProps> = ({ messages, theme }) => {
  if (messages.length === 0) {
    return (
      <Box justifyContent="center" alignItems="center" height={10}>
        <Text color={theme.systemMessage}>
          欢迎使用CLI聊天工具！输入您的问题开始对话。
        </Text>
      </Box>
    );
  }

  return (
    <Box flexDirection="column" paddingX={1}>
      {messages.map((message, index) => (
        <MessageItem
          key={`${message.id}-${index}`}
          message={message}
          theme={theme}
        />
      ))}
    </Box>
  );
};

export default MessageList;